import '@wangeditor/editor/dist/css/style.css'
import React, { useState, useEffect } from 'react'
import { Editor, Toolbar } from '@wangeditor/editor-for-react'
import { IDomEditor, IEditorConfig, IToolbarConfig } from '@wangeditor/editor'
import type { MenuProps } from 'antd';
import { Menu } from 'antd';
import './styles/systemagreement.scss'
import * as service from "../../../api/Statistics"

interface Props{

}

function SystemAgreement(props: Props) {
    // editor 实例
    const [editor, setEditor] = useState<IDomEditor | null>(null)
    // 编辑器内容
    const [html, setHtml] = useState('')
    const editorlist = () => {
        service.agreedata().then((res) => {
            console.log(res.data);
            var arr = res.data.data.map((item: any) => {
                return { value: item.agreementContent }
            })
            setHtml(`${arr[0].value}`)
        })
    }
    // 点击的key
    const [current, setCurrent] = useState('1');
    const onClick: MenuProps['onClick'] = (e) => {
        // console.log('click ', e);
        setCurrent(e.key);
        service.agreedata().then((res) => {
            // console.log(res.data);
            var arr = res.data.data.map((item: any) => {
                return {key:item.agreementId, value: item.agreementContent }
            })
            if (current == '3') {
                setHtml(`${arr[0].value}`)
            } else if (current == '1') {
                setHtml(`${arr[1].value}`)
            } else if (current == '2') {
                setHtml(`${arr[2].value}`)
            }
        })
    };
    useEffect(() => {
        editorlist()
        // console.log(htmlList)
        // setHtml(htmlList[0])
    }, [])
    const toolbarConfig: Partial<IToolbarConfig> = {}
    // 编辑器配置
    const editorConfig: Partial<IEditorConfig> = {
        placeholder: '请输入内容...',
    }
    useEffect(() => {
        return () => {
            if (editor == null) return
            editor.destroy()
            setEditor(null)
        }
    }, [editor])

    const items: MenuProps['items'] = [
        {
            label: '用户端隐私政策',
            key: '1',
          
        },
        {
            label: '医生端隐私政策',
            key: '2',
          
        },
        {
            label: '签约协议',
            key: '3',
          
        },
    ]
    return (
        <div className='system-agreement'>
            <h4> 协议管理</h4>
            <Menu onClick={onClick} selectedKeys={[current]} mode="horizontal" items={items} />
            <div className='text-box'>
                <p>内容</p>
            <div style={{ border: '1px solid #ccc', zIndex: 100}}>
                <Toolbar
                    editor={editor}
                    defaultConfig={toolbarConfig}
                    mode="default"
                    style={{ borderBottom: '1px solid #ccc' }}
                />
                <Editor
                    defaultConfig={editorConfig}
                    value={html}
                    onCreated={setEditor}
                    onChange={editor => setHtml(editor.getHtml())}
                    mode="default"
                    style={{ height: '500px', overflowY: 'hidden' }}
                />
            </div>
          
        </div>
        </div>
    );
}

export default SystemAgreement;